<script setup>
import { ref,reactive } from 'vue'

const isActive = ref(true)
const hasError = ref(false)

//绑定一个对象
const classObject = reactive({
  active: true,
  'text-danger': false
})

//表单绑定
const newInput = ref('')

//条件切换 
const awesome = ref(true) //先定义个true
//点击切换
function toggle(){
    awesome.value = !awesome.value  //注意value
}
</script>
<template>

Class 与 Style 绑定
<div class="static"
  :class="{ active: isActive, 'text-danger': hasError }"
>
active 激活 绿色
danger 红色
</div>

<div :class="classObject">

    active 激活 绿色
danger 红色
</div>

<div>表单绑定 <p>{{ newInput }}</p></div>
<div>
    <input v-model="newInput"  placeholder="Type here">
</div>

<div>条件切换</div>
<div>
  <button @click="toggle">Toggle</button>
  <h1 v-if="awesome">Vue is awesome!</h1>
  <h1 v-else>Oh no 😢</h1>
</div>

</template>

<style lang="scss" scoped>
 .active{color: #669334;}
 .text-danger{color: red;}

</style>


